<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.1/css/bootstrap.css">
    <!-- font-awesome font -->
    <link rel="stylesheet" href="font-awesome-3.2.1/css/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="font-awesome-3.2.1/css/font-awesome-ie7.min.css">
    <![endif]-->

    <title>im-mq Web</title>
    <link rel="stylesheet" href="assert/main.css">
</head>
<body>

<div class="container px-0" style="height: 100%;">
    <div style="height: 30px;"></div>
    <div class="ui_left">
        <div class="container-fluid scrol_show fill_all">
            <div class="row">
                <div class="list-group" style="font-size: 90%; width: 100%;">
                    <a href="#" class="list-group-item head-main">
                        <img src="assert/default-head.png" class="head-show">
                        <h5 class="list-group-item-heading">腾飞的星星<small>在线</small></h5>
                        <p class="list-group-item-text"><i class="icon-circle status-on"></i>你好啊</p>
                    </a>
                    <a href="#" class="list-group-item head-main">
                        <img src="assert/default-head.png" class="head-show">
                        <h5 class="list-group-item-heading">周星驰<small>在线</small></h5>
                        <p class="list-group-item-text"><i class="icon-circle status-off"></i>借我100W，明天还你</p>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div class="ui_right">
        <div class="row" style="height: 100%;margin-left: -25px;margin-right: 0px;">
            <div class="card card-block fill_all" style="width: 100%; padding: 10px; padding-bottom: 0px;">
                <div class="card-title">
                    <div style="font-size: 130%;">与【马化腾】交谈中 - 88888888</div>
                    <span style="font-size: 120%;">
                        <a class="icon-camera-retro" href="#" title="截图"> </a>
                        <a class="icon-facetime-video" href="#" title="视频"> </a>
                        <a class="icon-file" href="#" title="传文件"> </a>
                    </span>
                </div>
                <div class="card-text" style="height: 100%;">
                    <div class="scrol_show chat-body">
                        <div class="chat-box">
                            <div style="display: inline-block;">ssssssssssssssssss
                                ssssssssssssssssssssssssssssssssssssssssssssssss
                                ssssssssssssssssssssssssssssssssssssssssss
                            </div>
                        </div>
                        <div class="chat-box chat-box-right">
                            <div style="display: inline-block; ">
                                纯CSS气泡框实现方法探究 气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-foot">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">聊天:</span>
                        </div>
                        <input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" placeholder="支持文本和emoji..." >
                        <div class="input-group-append">
                            <button class="btn btn-success" type="button" onclick="rand_say();">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="clearfix"></div>
</div>

<div class="container-fluid" id="login_ui" style="display: none; padding: 10px; overflow: hidden">
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">UID:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="uid" placeholder="账户ID" value="100000">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">密码:</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="pwd" placeholder="用户密码">
        </div>
    </div>

</div>

<!-- jQuery first, then Bootstrap JS. -->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.1/js/bootstrap.js"></script>
<script src="layer/layer.js"></script>
<script src="assert/im.js"></script>

<script>
    var sessionid = "";
    var tmPing = null;
    function checkOrLogin() {
        sessionid = User_getSession();
        if (sessionid.length > 0){
            layer.msg("欢迎你回来~ "+sessionid)
            reflash_info();
        }else{
            var login_i = layer.open({
                id: "login_main",
                type: 1,
                anim: 5,
                skin: 'layui-layer-molv', //样式类名
                icon: 1,
                content: $("#login_ui"),
                resize: false,
                title: "登录IM",
                btnAlign: 'c', // 居中对齐
                closeBtn : false,
                btn: ["登录"],
                yes: function (index, layero) {
                    clear_ui();
                    strUID = $("#login_ui div div input[name='uid']").val();
                    strPWD = $("#login_ui div div input[name='pwd']").val();
                    User_Login(strUID, strPWD, function ( c ) {
                        sessionid = c;
                        layer.close(login_i);
                        layer.msg("登录成功!正在加载数据...");
                        reflash_info();
                    });
                }
            });
        }
    }

    function cb_ping() {
        sessionid = User_getSession();
        console.log("ping...",sessionid);
        User_Ping(sessionid);
        if (sessionid.length < 1 ){
            if (tmPing) {
                clearInterval(tmPing);
                tmPing = null;
            }
            checkOrLogin();
        }else{
            clear_ui();
            User_Info(sessionid);
        }
    }
    function reflash_info() {
        clear_ui();
        if (tmPing == null){
            cb_ping();
            tmPing = setInterval(cb_ping,1000*60);
        }
    }
    $(function () {
        reflash_info();
    });


</script>


</body>

</html>
